<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .borrowingRecord {
            height: 50px;
            background: #F8F8F9;
            width: 100%;
            margin: 10px 0px;
        }

        .outbound {
            width: 80px;
            height: 30px;
            background-color: rgb(33, 118, 255, 0.1);
            border-radius: 5px 5px 5px 5px;
            color: #2176FF;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
        }

        .archiveStorage {
            width: 80px;
            height: 30px;
            background-color: RGB(22, 183, 119, 0.1);
            border-radius: 5px 5px 5px 5px;
            color: #16b777;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            /*margin-left: 10px;*/
        }

        .archiveDelete {
            width: 80px;
            height: 30px;
            background-color: rgba(249, 240, 230, 1);
            border-radius: 5px 5px 5px 5px;
            color: #FC6F17;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            /*margin-left: 10px;*/
        }

        .operationContent {
            font-size: 16px;
            color: #858A98;
            height: 24px;
            text-align: center;
            /*margin-left: 10px;*/
        }

        .lineChartBody .layui-tab-brief > .layui-tab-title .layui-this {
            color: #2176FF !important;
        }

        .lineChartBody .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom: 3px solid #2176FF !important;
        }

        .lineChartBody .layui-tab .layui-tab-title li {
            max-width: 36px;
            padding: 0px;
            min-width: 36px;
        }

        .layui-tab .layui-tab-title {
            border-bottom-style: none;
        }

        .lineChartBody .layui-tab .layui-tab-title li:not(:first-child) {
            margin-left: 40px;
        }
    </style>
</head>
<body style="padding: 7.5px 0px;">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body" style="min-height: 425px">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        存取记录
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/archives/短网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row" style="margin-top: 17px;margin-left: 12px;">
                    <div class="borrowingRecord" th:each="borrowingRecord,iterStat : ${borrowingRecordsList}">
                        <div class="layui-row centered" style="height: 50px;justify-content: space-between;">
                            <div class="outbound" th:if="${borrowingRecord.getDataStatus() == 0 ||
                            borrowingRecord.getDataStatus() == 2}">档案出库
                            </div>
                            <div class="archiveStorage" th:if="${borrowingRecord.getDataStatus() == 1 ||
                            borrowingRecord.getDataStatus() == 3}">档案入库
                            </div>
                            <div class="archiveDelete" th:if="${borrowingRecord.getDataStatus() == 4}">档案删除</div>
                            <div class="archiveStorage" th:if="${borrowingRecord.getDataStatus() == 5}">新增档案</div>
                            <div class="operationContent" th:text="${borrowingRecord.getOperation()}">
                            </div>
                            <div class="operationContent" th:text="${borrowingRecord.getCreateTime()}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        档案类型统计
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/archives/短网格.png" alt="" style="max-width: 100%;">
                </div>
                <div>
                    <div id="typeBar" style="width:100%;height: 377px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row lineChartBody" style="margin-left: 12px;margin-top: 6px;">
                    <div class="centered" style="justify-content: space-between;">
                        <div style="display: flex">
                            <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                            <div style="font-weight: bold;font-size: 20px;color: #000000;line-height: 20px;text-align: left;font-style: normal;text-transform: none;margin-left: 10px;">
                                档案存取统计
                            </div>
                        </div>
                        <div class="centered">
                            <div class="centered">
                                存入:
                                <div style="margin-left:14px;width: 20px;height: 20px;background: #4385F2;border-radius: 0px 0px 0px 0px;"></div>
                            </div>
                            <div class="centered" style="margin-left: 36px;">
                                借阅:
                                <div style="margin-left:14px;width: 20px;height: 20px;background: #FCC952;border-radius: 0px 0px 0px 0px;"></div>
                            </div>
                            <div class="layui-tab layui-tab-brief" style="margin-left: 36px;"
                                 lay-filter="yearMonthSwitch">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">本月</li>
                                    <li>本年</li>
                                </ul>
                            </div>
                            <div style="margin-left: 40px;">
                                <form class="layui-form" action="" style="margin-top: 0px;">
                                    <div class="layui-form-item layui-inline" style="margin-bottom: 0px;">
                                        <div class="layui-inline" id="selectMonth"
                                             style="margin-bottom: 0px;margin-right: 0px;">
                                            <div class="layui-input-inline" style="width: 150px">
                                                <input type="text" autocomplete="off" style="width: 150px;height: 44px;"
                                                       name="startDate" id="startDate" class="layui-input"
                                                       th:value="${startDate}"
                                                       placeholder="开始日期">
                                            </div>
                                            <div class="layui-input-inline" style="width: 150px">
                                                <input type="text" autocomplete="off" name="endDate" id="endDate"
                                                       class="layui-input" style="height: 44px;" th:value="${endDate}"
                                                       placeholder="结束日期">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="">
                    <div id="lineChart" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['echarts', 'laydate', 'jquery'], function () {
        let echarts = layui.echarts;
        let laydate = layui.laydate;
        var $ = layui.jquery;
        var element = layui.element;

        // tab 切换事件
        element.on('tab(yearMonthSwitch)', function (data) {
            console.log(data.index); // 得到当前 tab 项的所在下标

            // 获取当前日期
            const today = new Date();
            // 设置为本月的第一天
            const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            // 将日期格式化为 YYYY-MM-DD 格式的字符串
            const year = firstDayOfMonth.getFullYear();
            const month = String(firstDayOfMonth.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保是两位数
            const day = String(firstDayOfMonth.getDate()).padStart(2, '0'); // 确保是两位数
            const formattedDate = `${year}-${month}-${day}`;
            console.log(formattedDate); // 输出格式为 YYYY-MM-DD 的字符串
            // 获取当前日期
            let currentDate = new Date();
            // 设置为下个月的第一天
            currentDate.setMonth(currentDate.getMonth() + 1);
            currentDate.setDate(1);
            // 减去一天，得到本月的最后一天
            let lastDayOfMonth = new Date(currentDate - 1);
            // 格式化为 YYYY-MM-DD 格式的字符串
            let year2 = lastDayOfMonth.getFullYear();
            let month2 = String(lastDayOfMonth.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且补零
            let day2 = String(lastDayOfMonth.getDate()).padStart(2, '0'); // 补零
            let lastDayOfMonthString = `${year2}-${month2}-${day2}`;
            console.log(lastDayOfMonthString)
            borrowingRecordLineChart(formattedDate, lastDayOfMonthString)

        });

        function maxDate() {
            var now = new Date();
            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        }

        // 档案类型统计
        function archivesTypeLineChart() {
            $.get('/archives/statistics/type', {}).done(function (data) {
                var typeBar = echarts.init(document.getElementById('typeBar'));
                archivesTypeOption = {
                    backgroundColor: '#ffffff',
                    color: ['#2176FF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.xName,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    barMaxWidth: '30',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return params.value
                        }
                    },
                    series: [

                        {
                            name: '档案类型新增',
                            type: 'bar',
                            data: data.yName
                        }
                    ]
                };
                typeBar.setOption(archivesTypeOption);

                window.addEventListener('resize', function () {
                    typeBar.resize();
                });

            });
        }

        archivesTypeLineChart();


        //日期范围
        laydate.render({
            elem: '#selectMonth',
            max: maxDate(),
            range: ['#startDate', '#endDate'],
            theme: '#000',
            done: function (value, date, endDate) {
                let selectStartDate = date.year + "-" + date.month + "-" + date.date
                let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                borrowingRecordLineChart(selectStartDate, selectEndDate)
            },
        });

        // 借阅记录柱状图
        function borrowingRecordLineChart(selectStartDate, selectEndDate) {
            $.get('/archives/statistics/access', {
                "selectStartDate": selectStartDate,
                "selectEndDate": selectEndDate
            }).done(function (data) {
                var lineChart = echarts.init(document.getElementById('lineChart'), null, {
                    // width: 600,
                    // height: 400
                });
                const colorList = ["#FCC952", '#4385F2']
                option = {
                    backgroundColor: '#fff',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            label: {
                                show: true,
                                backgroundColor: '#fff',
                                color: '#556677',
                                borderColor: 'rgba(0,0,0,0)',
                                shadowColor: 'rgba(0,0,0,0)',
                                shadowOffsetY: 0
                            },
                            lineStyle: {
                                width: 0
                            }
                        },
                        backgroundColor: '#fff',
                        color: '#5c6c7c',
                        padding: [10, 10],
                        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
                    },
                    grid: {
                        top: '15%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.xName,
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#556677',
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],

                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                                backgroundColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#fff' // 0% 处的颜色
                                    }, {
                                        // offset: 0.9,
                                        offset: 0.86,

                                        color: '#fff' // 0% 处的颜色
                                    }, {
                                        offset: 0.86,
                                        color: '#33c0cd' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#33c0cd' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            color: '#556677',
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '借阅',
                        type: 'line',
                        data: data.lendingList,
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: true,
                        lineStyle: {
                            width: 5,
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#FCC952'
                            }
                            ]),
                            shadowColor: 'rgba(255, 204, 145, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            color: colorList[0],
                            borderColor: colorList[0]
                        }
                    }, {
                        name: '归还',
                        type: 'line',
                        data: data.returnList,
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: true,
                        lineStyle: {
                            width: 5,
                            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                                offset: 0,
                                color: '#4385F2'
                            }
                            ]),
                            shadowColor: 'rgba(67, 133, 242, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            color: colorList[1],
                            borderColor: colorList[1]
                        }
                    }]
                };

                lineChart.setOption(option);

                window.onresize = function () {
                    lineChart.resize();
                }
            });
        }

        borrowingRecordLineChart(null, null)
        // var height = $('.lineChartHeight').outerHeight();
        // 输出高度
        // myChart.resize({height: height - 80 });

    })

</script>
</body>
</html>